<template>
	<view class="page-content">
		<f-navbar title="消错申请" :navbarType="1"></f-navbar>
		<view class="form-block">
			<view class="item-form" style="align-items: flex-start;">
				<view class="item-label required">提交消错原因</view>
				<view class="flex-sub padding-right-sm">
					<u--textarea border="none" v-model="form.remark" placeholder="请输入" ></u--textarea>
				</view>
			</view>
			<view class="item-form item-form-img">
				<view class="item-label">现场照片（{{imgs.length}}/5）</view>
				<view class="" style="margin-top: 32rpx;">
					<uploadList :num="5" v-model="imgs" uploadTip="上传"></uploadList>
				</view>
			</view>
			<view class="login-btn">
				<u-button color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
					:customStyle="{width:'635rpx',height:'83rpx',fontSize:'34rpx',borderRadius:'50rpx',fontWeight:'bold'}"
					@click="submitForm">确认
				</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		alarmApplication
	} from "@/api/police.js"
	import uploadList from "@/components/upload/list.vue"
	export default {
		components: {
			uploadList
		},
		data() {
			return {
				pageData:{},
				form: {
					remark:null,
				},
				imgs: []
			};
		},
		onPageScroll(e) {

		},
		onReady() {

		},
		onShow() {
			
		},
		onLoad(option) {
			this.pageData = option
		},
		onHide() {

		},
		methods: {
			submitForm(){
				console.log(this.imgs);
				console.log(this.imgs.join(","));
				if(!this.form.remark){
					uni.$u.toast('请输入消错原因！');
					return;
				}
				alarmApplication({
					sitePhotos:this.imgs.join(","),
					...this.form,
					...this.pageData,
				}).then((res)=>{
					uni.$u.toast('消错申请成功');
					this.goLink('','back')
				})
			}
		},
	};
</script>
<style lang="scss" scoped>
	/deep/.input-placeholder {
		color: #666668 !important;
		font-size: 28rpx;
		text-align: right;
	}
	.page-content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		.form-block {
			flex:1;
			margin-top: 32rpx;
			padding: 0 32rpx;
			background: #ffffff;

			.item-form {
				padding: 32rpx 0;
				border-bottom: 1rpx solid #EFEFEF;
				display: flex;
				align-items: center;

				&.item-form-img {
					display: block;
				}

				.item-label {
					font-size: 30rpx;
					color: #000000;
					margin-right: 32rpx;

					&.required:before {
						content: "*";
						color: #DF0E0E;
						font-size: 32rpx;
						margin-right: 3rpx;
					}
				}

				.item-value {
					white-space: nowrap;
					width: 520rpx;

					.item-tag {
						display: inline-block;
						height: 64rpx;
						background: #F7F7F7;
						border-radius: 50rpx;
						padding: 0 20rpx;
						min-width: 152rpx;
						background: #F7F7F7;
						color: #000000;
						border: 2rpx solid #F7F7F7;
						line-height: 64rpx;
						margin-right: 26rpx;
						text-align: center;

						&.active {
							border-color: #138E57;
							color: #138E57;
						}
					}
				}

				::v-deep.u-textarea {
					padding: 0;
				}
			}
			
			
			.login-btn{
				margin-top: 88rpx;
			}

		}
	}
</style>